<template>
  <m-page>
    <m-header>
      <!-- 头部 -->
      <div class="g-header">
        <ynet-cell-item class="g-item" title="长湘贷信用卡（尾号1234）">
          <template slot="left">
            <div class="g-img"></div>
          </template>
        </ynet-cell-item>
      </div>
      <!-- 选择器 -->
      <div class="g-select">
        <button @click="showPopUp('bottom')">全部 <ynet-icon name="arrow-down" size="sm"></ynet-icon></button>
        <ynet-popup v-model="isPopupShow.bottom" position="bottom">
				<ynet-popup-title-bar
					title="选择日期"
					ok-text="完成"
					cancel-text="取消"
					@confirm="hidePopUp('bottom')"
					@cancel="hidePopUp('bottom')"
				></ynet-popup-title-bar>
				<div class="md-example-popup md-example-popup-bottom">
					
				</div>
			</ynet-popup>
      </div>
      <!-- 列表区域 -->
      <div class="g-list">
        <ul>
          <li>
            <ynet-cell-item
              title="2020年01月账单"
              brief="账单日：01-22"
              addon="-￥ 1920.00"
              arrow
            ></ynet-cell-item>
          </li>
          <li>
            <ynet-cell-item
              title="2020年01月账单"
              brief="账单日：01-22"
              addon="-￥ 1920.00"
              arrow
            ></ynet-cell-item>
          </li>
          <li>
            <ynet-cell-item
              title="2020年01月账单"
              brief="账单日：01-22"
              addon="-￥ 1920.00"
              arrow
            ></ynet-cell-item>
          </li>
          <li>
            <ynet-cell-item
              title="2020年01月账单"
              brief="账单日：01-22"
              addon="-￥ 1920.00"
              arrow
            ></ynet-cell-item>
          </li>
        </ul>
      </div>
    </m-header>
  </m-page>
</template>

<script>
import {
  CellItem,
  Switch,
  Icon,
  Tag,
  Button,
  Popup,
  PopupTitleBar
} from "ynet-mobile";
export default {
  components: {
    [CellItem.name]: CellItem,
    [Switch.name]: Switch,
    [Icon.name]: Icon,
    [Tag.name]: Tag,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar
  },
  data() {
    return {
      isPopupShow: {}
    };
  },
  methods: {
    showPopUp(type) {
      this.$set(this.isPopupShow, type, true);
    },
    hidePopUp(type) {
      this.$set(this.isPopupShow, type, false);
    }
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {}
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
// .md-example-popup {
//   position: relative;
//   font-size: 36px;
//   font-weight: 500;
//   box-sizing: border-box;
//   text-align: center;
//   background-color: #fff;
// }
// .md-example-popup-center {
//   padding: 50px;
//   border-radius: 10px;
// }
// .md-example-popup-top {
//   width: 100%;
//   height: 85px;
//   line-height: 85px;
//   background: #4a4c5b;
//   color: #fff;
//   .md-icon {
//     position: absolute;
//     right: 20px;
//     top: 50%;
//     transform: translateY(-50%);
//   }
// }
// .md-example-popup-left,
// .md-example-popup-right {
//   height: 100%;
//   padding: 0 150px;
//   display: flex;
//   align-items: center;
// }
// .md-example-popup-bottom {
//   width: 100%;
//   padding: 100px 0;
//   p {
//     line-height: 50px;
//   }
// }
</style>
